<template>
  <view class="background">
    <u-tabs class="tab" style="" :list="tabarr" keyName="title" :lineShow="true" :lineCrude="6" :activeSize="18" linePlace="26px"
            activeTextColor="#333" bold=600 textColor="#333" lineColor="linear-gradient(to right, #98F0BC 30%, #98F0BC)"
            @change="tabChange" v-model="current">
    </u-tabs>
    <view class="scroll-container">
      <view class="container" v-for="(item,index) in statusList" :key="index">
        <view class="top-section">
          <view class="title">{{ item.title }}</view>
          <view class="category" v-if="item.category === 1" style="color: #4646b1">案例</view>
          <view class="category" v-if="item.category === 2" style="color: #ec5858">文献资料</view>
          <view class="category" v-if="item.category === 3" style="color: #ce982b">课件</view>
          <view class="category" v-if="item.category === 4" style="color: #0694f3">作业</view>
          <view class="pass" v-if="item.auditStatus === 1">已通过</view>
        </view>
        <view class="content">{{ item.description }}</view>

        <view style="display: flex;" v-if="item.auditStatus === 0">
          <button class="button" style="color: #19aa33;font-weight: bolder" @click="audit(item.id, 1)">通过</button>
          <button class="button" style="color: #dc3d3d;font-weight: bolder" @click="audit(item.id, 2)">打回</button>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import admin from '@/api/admin/index.js'
import {AuditResourcesForm} from "../../api/admin/type";
import teacher from "../../api/teacher";

export default {
  data() {
    return {
      tabarr: [
        {
          title: '全部'
        },
        {
          title: ''
        },
        {
          title: ''
        },
        {
          title: ''
        },
        {
          title: ''
        },
        {
          title: '待审核'
        },
        {
          title: ''
        },
        {
          title: ''
        },
        {
          title: ''
        },
        {
          title: '已通过'
        }
      ],
      resourceList: [],
      statusList: [],
      auditForm: {
        resourceId: AuditResourcesForm.resourceId,
        auditStatus: AuditResourcesForm.auditStatus
      },
      current: 0
    }
  },
  async onLoad() {
    await this.getAllList()
  },
  methods: {
    //获取所有资源列表
    async getAllList() {
      try {
        const res = await teacher.getAllResourceList();
        this.resourceList = res.data
        this.statusList = this.resourceList
      } catch (e) {
        return await Promise.reject(e)
      }
    },
    //导航
    tabChange(index) {
      this.current = index.index
      if (index.index === 0) {
        //全部
          this.statusList= this.resourceList
      }
      if (index.index === 5) {
        //待审核
        this.statusList = this.resourceList.filter(item => item.auditStatus === 0)
      }

      if (index.index === 9) {
        //已通过
        this.statusList = this.resourceList.filter(item => item.auditStatus === 1)
      }

    },

    //资源审核
    async audit(resourceId, status) {
      this.auditForm.resourceId = resourceId
      this.auditForm.auditStatus = status

      try {
        const res = await admin.auditResource(this.auditForm);
        if (res.code === 200 && status === 1) {
          // 显示提示信息
          uni.showToast({
            title: '审核成功',
            icon: 'success',
            duration: 1000
          });
          await this.getAllList()
          this.statusList = this.resourceList.filter(item => item.auditStatus === 0)
          if (this.current === 0) {
            this.statusList = this.resourceList
          }
        } else if (res.code === 200 && status === 2) {
          // 显示提示信息
          uni.showToast({
            title: '退回成功',
            icon: 'success',
            duration: 1000
          });
          await this.getAllList()
          this.statusList = this.resourceList.filter(item => item.auditStatus === 0)
        } else {
          uni.showToast({
            title: '无权限操作!',
            icon: 'none',
            duration: 1000
          });
        }
      } catch (e) {
        return await Promise.reject(e)
      }
    },

  }
}
</script>

<style>
.background {
  height: 100vh; /* 使背景占满整个视口高度 */
  width: 100%;
  background: white;
  flex-direction: column; /* 使子元素垂直排列 */
  display: flex;
  align-items: center; /* 垂直居中 */
}

.scroll-container {
  width: 90%;
  max-height: 500px; /* 设置最大高度，可以根据需要调整 */
  overflow-y: auto; /* 启用垂直滚动条 */
}


.container {
  border: 1px solid #cccccc;
  border-radius: 10px;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  width: 90%;
  height: 150px; /* 调整高度以适应内容 */
  padding: 10px; /* 可选：添加内边距 */
  margin-top: 10px;
}

.top-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  flex: 1;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
}

.category {
  text-align: right;
  font-weight: bold;
  font-size: 16px;
  padding-right: 20px;
}


.content {
  text-align: left;
  font-size: 14px;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  flex: 1;
  padding-top: 10px;
}

.button {
  width: 100px;
  font-size: 14px;
}

.pass {
  font-weight: bold;
  font-size: 16px;
  color: #19aa33;
}

.tab {
  width: 90%;
  font-weight: bolder;
}
</style>
